{% extends 'base.html' %}
{% load static %}

{% block title %}
    数据总览
{% endblock %}

{% block css %}
    <style>
        .col-md-3 {
            border-right: 1px solid #ddd;
        }

        .col-md-3:last-child {
            border-right: none;
        }

        .icon_back {
            padding: 30px 0;
            background-color: #f5f5f5;
        }

        .icon_div {
            background-color: white;
            border-radius: 10px;
            padding: 10px;
            transition: all 0.5s ease;
        }

        .icon_div:last-child {
            border-right: none;
        }

        .icon_div:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
        }

        .icon_h4, .icon_p {
            margin-top: 20px;
            text-align: center;
        }

        .icon_p {
            font-size: 20px;
            font-weight: bolder;
            margin: 10px 0 20px 0;
        }

        .centered_text {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            margin-bottom: 20px;
        }

        .centered_text span {
            font-size: 30px;
            font-weight: bolder;
        }

        .centered_text hr {
            flex-grow: 1;
            border: none;
            border-top: 1px solid #ddd;
        }

        .centered_text::before,
        .centered_text::after {
            content: '';
            flex-grow: 1;
            height: 1px;
            background: #ddd;
        }

        tr, td, th {
            text-align: center;
        }
    </style>
{% endblock %}

{% block nav %}
    <li class="active"><a href="{% url 'index' %}">数据总览</a></li>
    <li><a href="{% url 'search' %}">检索订单</a></li>
    <li><a href="{% url 'chart' %}">区域经理业绩</a></li>
    <li><a href="{% url 'predict' %}">地区业绩预测</a></li>
{% endblock %}

{% block body %}
    <div class="icon_back">
        <div class="container">
            <div class="row">
                <div class="centered_text">
                    <hr>
                    <span>&emsp;销售数据总览&emsp;</span>
                    <hr>
                </div>
                <div class="col-md-3">
                    <div class="icon_div">
                        <h4 class="icon_h4">成交单数总量</h4>
                        <p class="icon_p">{{ order_sum }}</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="icon_div">
                        <h4 class="icon_h4">合作客户数量</h4>
                        <p class="icon_p">{{ customer_sum }}</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="icon_div">
                        <h4 class="icon_h4">在售商品种类</h4>
                        <p class="icon_p">{{ product_type_count }}</p>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="icon_div">
                        <h4 class="icon_h4">总利润统计</h4>
                        <p class="icon_p">{{ profit_sum }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" style="margin-top: 30px;">
        <div class="row">
            <div class="col-md-12">
                <div class="centered_text">
                    <hr>
                    <span>&emsp;地区销售热力图地图&emsp;</span>
                    <hr>
                </div>
            </div>
            <div class="col-md-9">
                <div id="map" style="height: 600px"></div>
            </div>
            <div class="col-md-3">
                <div class="panel panel-info">
                    <div class="panel-heading" id="info"></div>
                    <table id="myTable" class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>城市名</th>
                            <th>利润总和</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- 行数据将被插入到这里 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script rel="text/javascript" src="{% static 'js/china.js' %}"></script>
    <script type="text/javascript">
        let myChart = echarts.init(document.querySelector("#map"));
        let option = {
            tooltip: {
                trigger: "item",
                formatter: function (e, t, n) {
                    return .5 === e.value ? e.name + "：" : e.seriesName + "<br />" + e.name + "：" + e.value
                }
            },
            visualMap: {
                min: -10,
                max: 60,
                left: 26,
                bottom: 10,
                showLabel: 1,
                text: ["高", "低"],
                pieces: [{
                    gt: 300000,
                    label: ">30w",
                    color: "#3498DB"
                }, {
                    gt: 150000,
                    lte: 300000,
                    label: "15w-30w",
                    color: "#3498DB"
                }, {
                    gt: 100000,
                    lte: 150000,
                    label: "10w-15w",
                    color: "#5DADE2"
                }, {
                    gt: 50000,
                    lte: 100000,
                    label: "5w-10w",
                    color: "#85C1E9"
                }, {
                    gt: 0,
                    lte: 50000,
                    label: "0-5w",
                    color: "#AED6F1"
                }, {
                    lte: 0,
                    label: "<0",
                    {#color: "#D6EAF8"#}
                    color: "#F1948A"
                }],
                show: !0
            },

            geo: {
                map: "china",
                roam: true,
                scaleLimit: {
                    min: 1.15,
                    max: 3
                },
                zoom: 1.15,
                top: 50,
                label: {
                    normal: {
                        show: !0,
                        fontSize: "15",
                        color: "rgba(0, 0, 0, 0.8)"
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: "#FF6600"
                    },
                    emphasis: {
                        areaColor: "#FFFF00",
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        borderWidth: 3
                    }
                }
            },
            series: [{
                name: "销售总额",
                type: "map",
                geoIndex: 0,
                data: {{ map_data }},
            }],
        };
        myChart.setOption(option);
        // 添加点击事件
        myChart.on('click', function (params) {
            $.ajax({
                url: '/get_sale_info/',
                type: 'POST',
                data: {
                    'province': params.name,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                dataType: 'json',
                success: function (data, textStatus, jqXHR) {
                    // JQuery
                    $('#info').text(params.name + "的各地区利润统计");
                    // 创建一个表格
                    let table = $('#myTable');
                    // 清空表格元素
                    table.find('tbody').empty();
                    // 遍历数据，对每一行数据创建一个表格行
                    $.each(data.result, function (index, value) {
                        let row = $('<tr></tr>');
                        row.append($('<td></td>').text(value.city));
                        row.append($('<td></td>').text(value.profit));
                        // 将这个表格行添加到表格中
                        table.append(row);
                    });
                    // 将填充完数据的表格添加到页面中的某个元素（例如一个 id为 "content" 的 div）
                    $('#content').html(table);
                    console.log(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    // 这里是请求失败后的回调函数
                    alert("获取失败！");
                }
            });
        });
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>
{% endblock %}
